<template>
  <div>
    <mt-header title="请注册您的账号">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <mt-field
      type="text"
      label="用户名"
      placeholder="请输入6-12用户名"
      :state="nameState"
      v-model="usename"
      @blur.native.capture="myUsename"
    ></mt-field>
    <mt-field
      type="password"
      label="密码"
      placeholder="请输入8-20密码"
      :state="passState"
      autocomplete="off"
      v-model="password"
      @blur.native.capture="myPassword"
    ></mt-field>
    <mt-field
      type="password"
      label="确认密码"
      placeholder="请再次输入密码"
      :state="pass2State"
      v-model="password2"
      @blur.native.capture="myPassword2"
    ></mt-field>
    <mt-button type="primary" size="large" @click="handle">免费注册</mt-button>
  </div>
</template>

<script>
let usenameRegExp = /^[a-zA-Z0-9_]{6,12}$/;
let passwordRegExp = /^[a-zA-Z0-9_]{8,20}$/;
export default {
  data() {
    return {
      // 用户名的初始值
      usename: "",
      // 密码的状态初始值
      password: "",
      // 确认密码的状态初始值
      password2: "",
      // 用户名的状态初始值
      nameState: "",
      // 密码的状态初始值
      passState: "",
      // 确认密码的状态初始值
      pass2State: "",
    };
  },
  methods: {
    // 失去焦点时触发校验事件
    // 1.用户名
    myUsename() {
      if (usenameRegExp.test(this.usename)) {
        this.nameState = "success";
        return true;
      } else {
        this.$toast("用户名不合法");
        this.nameState = "error";
        return false;
      }
    },
    // 2.密码
    myPassword() {
      if (passwordRegExp.test(this.password)) {
        this.passState = "success";
        return true;
      } else {
        this.$toast("密码不合法");
        this.passState = "error";
        return false;
      }
    },
    myPassword2() {
      if (this.password == this.password2) {
        this.pass2State = "success";
        return true;
      } else {
        this.$toast("两次密码不一致");
        this.pass2State = "error";
        return false;
      }
    },

    // 单击按钮时完成用户信息的校验
    handle() {
      // 4,如果都正确了，则将相关的信息提交到服务器
      if (this.myUsename() && this.myPassword() && this.myPassword2()) {
        // 将相关信息提交到服务器
        this.$axios
          .post("/register", "uname=" + this.usename + "&upwd=" + this.password)
          .then((res) => {
            if (res.data.code == 0) {
              this.$messagebox("注册提示", "用户名已存在");
            } else {
              this.$toast("注册成功");
              // 登陆完跳转回请求登录的页面
              let redirect = this.$store.state.redirect;
              if (redirect == "jdgm") {
                // 修改vue-x的登录状态
                this.$store.commit("setGoto", "jdgm1");
                // 跳转
                this.$router.push({
                  path: "/login",
                  query: { usename: this.usename },
                });
              } else if (redirect == "lxgm") {
                // 修改vue-x的登录状态
                this.$store.commit("setGoto", "lxgm1");
                // 跳转;
                this.$router.push({
                  path: "/login",
                  query: { usename: this.usename },
                });
              } else {
                this.$router.push({
                  path: "/login",
                  query: { usename: this.usename },
                });
              }
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.mint-header {
  background: #ffba33;
}
.mint-button {
  background: #ffba33;
  color: red;
}
</style>
